<template>
  <el-form
    :rules="rules"
    class="login-container"
    label-position="left"
    label-width="0px"
    v-loading="loading"
  >
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox
      class="login_remember"
      name="rememberMe"
      v-model="loginForm.rememberMe"
      label-position="left"
    >记住密码</el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%" @click="submitClick">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import axios from 'axios'

// export default {
//   data () {
//     var validatePass = (rule, value, callback) => {
//       if (value === '') {
//         callback(new Error('请输入密码'))
//       } else {
//         if (this.ruleForm.checkPass !== '') {
//           this.$refs.ruleForm.validateField('checkPass')
//         }
//         callback()
//       }
//     }
//     return {
//       loginForm: {
//         username: '',
//         pwd: ''
//       },
//       rules: {
//         pass: [{ validator: validatePass, trigger: 'blur' }]
//       }
//     }
//   },
//   methods: {
//     submitForm (formName) {
//       // this.$refs[formName].validate(valid => {
//       //   if (valid) {
//       //     alert('submit!')
//       axios({
//         method: 'post',
//         url: '/api/auth/login',
//         data: {
//           username: this.loginForm.username,
//           pwd: this.loginForm.pwd
//         },
//         headers: {
//           'Content-Type': 'application/x-www-form-urlencoded'
//         }
//       })
// .then(result => {
//   if (result.data.code === 200) {
//     this.$toast(result.data.message)
//     this.$router.push({ path: '/home' })
//   } else {
//     this.$toast(result.data.message)
//   }
//   console.log(result)
// })
// .catch(err => {
//   console.log(err)
// })
//       // } else {
//       //   console.log('error submit!!')
//       //   return false
//     }
//     // })
//   },
//   resetForm (formName) {
//     this.$refs[formName].resetFields()
//   }
// }

export default {
  data () {
    return {
      rules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        checkPass: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      // checked: true,
      loginForm: {
        username: 'admin',
        password: '123',
        rememberMe: true
      },
      loading: false
    }
  },
  methods: {
    submitClick: function () {
      this.loading = true
      axios({
        method: 'post',
        url: '/api/auth/login',
        data: {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe
        },
        transformRequest: [
          function (data) {
            let ret = ''
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                '=' +
                encodeURIComponent(data[it]) +
                '&'
            }
            return ret
          }
        ],
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(result => {
          this.loading = false
          console.log(result)

          if (result.data.code === 200) {
            this.$toast('登录成功！')
            this.$router.push({ path: '/home' })
            localStorage.token = result.data.data // 将token存入localStorage
          } else {
            this.$toast(result.data.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$toast(err)
        })
    }
  }
}
</script>

<style>
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.login_remember {
  margin: 0px 0px 35px 0px;
  text-align: left;
}
</style>
